<template>
  <div class="orderInfo">
    <div class="nav-bar">
      <div class="bottom">
        <span>
          <van-icon @click="$router.push('/replace/home')" class="go-back" name="arrow-left" />
        </span>
        <span>{{detailData.order_number}}</span>
      </div>
    </div>
    <div class="orderInfo-content">
      <van-collapse v-model="activeClass" :class="lx == 2 && ((xm==3 && bz == 2) || (xm == 2 && bz == 2))?'withdraw-three':detailData.status == 3?'withdraw-four':'withdraw-two'">
        <van-collapse-item title="流程进度" name="1" v-if="detailData.status != 1">
          <div class="steps-box">
            <van-steps direction="vertical">
              <van-step :border="false" v-for="(data, index) in detailData.statuss" :key="index">
                <template slot="active-icon">
                  <div class="activeIcon">
                    <div></div>
                  </div>
                </template>
                <template slot="inactive-icon">
                  <div class="activeIcon">
                    <div></div>
                  </div>
                </template>
                <div class="step-title">
                  <span>{{data.describe}}</span>
                </div>
                <div class="step-info">
                  <span>{{data.created_at}}</span>
                </div>
              </van-step>
            </van-steps>
          </div>
        </van-collapse-item>
        <van-collapse-item title="订单信息" name="2">
          <van-cell :border="false" title="订单状态" :value="stausName" />
           <van-cell
            v-if="detailData.status == 6"
            :border="false"
            title="退回原因"
            label-class="font_danger ml10"
            :value="detailData.order_records_reason.isSelf|isSelf"
          />
          <van-cell
            v-if="detailData.status == 6"
            :border="false"
            title="原因说明"
            label-class="font_danger ml10"
            :value="detailData.order_records_reason.remark"
          />
          <van-cell :border="false" title="支付订单号" :value="detailData.order_number" />
          <van-cell :border="false" title="代办事项" :value="detailData.service_project_title" />
          <van-cell :border="false" title="报销类型" :value="detailData.expenseCate_title" />
          <van-cell v-if="detailData.expenseName" :border="false" title="报销人姓名" :value="detailData.expenseName" />
          <van-cell :border="false" title="联系电话" :value="detailData.users_phone" />
          <van-collapse-item title="报销补充信息" v-if="Array.isArray(detailData.expenseCateCompanyPriceJson)" name="4">
            <van-cell :border="false" title="报销人员" v-if="title=='中文论文'" :value="ordermsg.isOtherPay | isother" />
            <van-cell :border="false" title="他人账号" v-if="title=='中文论文'&&ordermsg.isOtherPay==1" :value="ordermsg.payNo" />
            <van-cell :border="false" title="他人姓名" v-if="title=='中文论文'&&ordermsg.isOtherPay==1" :value="ordermsg.payName" />
          </van-collapse-item>
          <van-collapse-item title="报销补充信息" v-if="Array.isArray(detailData.ordersExpenseCateJson)" name="4">
            <div v-for="(item,index) in detailData.ordersExpenseCateJson" :key="index" v-if='item.fieldEn !="money"'>
              <van-cell :border="false" :title="item.fieldCh" v-if="item.fieldCh == '报销人员'" :value="item.value | isother" />
              <van-cell :border="false" :title="item.fieldCh" v-else-if="item.fieldCh == '报销方式'" :value="item.value | paytype" />
              <van-cell :border="false" :title="item.fieldCh" v-else-if="item.fieldCh == '是否公务卡'" :value="item.value | isGwk" />
              <van-cell :border="false" :title="item.fieldCh" v-else-if="item.type == 'input'" :value="item.value" />
              <template v-else>
                <van-cell :title="item.fieldCh" :border="false">
                  <template #default>
                    <a
                      v-if='!Array.isArray(item.value)'
                      class="f20 btn_text"
                      :href="item.value"
                      target="_blank"
                    >
                      <van-icon name="balance-list-o" />
                    </a>
                    <span v-else v-for='(img,index1) in item.value' :key='index1' class='ml6'>
                       <a
                          class="f20 btn_text"
                          :href="img"
                          target="_blank"
                        >
                      <van-icon name="balance-list-o" />
                      </a>
                    </span>
                  </template>
                </van-cell>
              </template>
            </div>
          </van-collapse-item>
          <van-cell
            v-if="isOfficialCard !== null"
            :border="false"
            title="公务卡支付"
            :value="isOfficialCard == 1 ? '是' : '否'"
          />
          <van-cell :border="false" title="创建时间" :value="detailData.created_at" />
          <van-cell :border="false" v-if="detailData.status==2" title="接单时间" :value="jdDate" />
          <van-cell :border="false" title="发票是否过期" :value="detailData.service_time  == 0?'是':'否'" />
          <van-cell :border="false" title="报销时间" :value="detailData.service_time + '天'" />
          <van-cell :border="false" title="预期收益" :value="detailData.quoted_price+ '元'" />
          <van-cell :border="false" title="剩余天数" :value="syTime" v-if="detailData.status == 2" />
          <van-cell
            :border="false"
            title="用户昵称"
            :value="detailData.users_nickname"
            v-if="detailData.status == 2 || detailData.status == 3"
          />
          <van-cell
            :border="false"
            title="联系电话"
            :value="detailData.users_phone"
            v-if="detailData.status == 2 || detailData.status == 3"
          />
          <van-cell
            :border="false"
            title="OA账号"
            :value="detailData['expand_info as users_oa_phone']|| ''"
            v-if="(detailData.status == 2 || detailData.status == 3) && detailData.service_project == 3"
          />
          <van-cell
            :border="false"
            title="OA密码"
            :value="detailData['expand_info as users_oa_pwd']|| ''"
            v-if="(detailData.status == 2 || detailData.status == 3) && detailData.service_project == 3"
          />
          <van-cell title="发票文件" :border="false" v-if="detailData.invoice_file && (detailData.status==2 || lx == 7 || detailData.status==1)">
            <template #default>
              <a
                class="f20 btn_text"
                :href="`${baseUrls}/api/download?path=${detailData.invoice_file}`"
                download="orderFile/20200906/pkq.jpeg"
              >
                <van-icon name="balance-list-o" />
              </a>
            </template>
          </van-cell>
          <van-collapse-item
            title="报销文件"
            name="3"
            v-if="(detailData.status==2 || lx == 7 || detailData.status==1) && detailData.service_file"
          >
            <a
              v-for="(item,index) in detailData.service_file.split('&')"
              :key="index"
              class="f20 btn_text files"
              :href="item"
              :download="detailData.service_file"
            >
              <van-icon name="orders-o" />
            </a>
          </van-collapse-item>
          <van-cell title="签字文件" v-if="detailData.sign_file">
            <template #default>
              <a
                class="file-details f20 btn_text"
                :href="detailData.sign_file"
                download="orderFile/20200906/pkq.jpeg"
              >
                <van-icon name="records" class="f20" />
              </a>
            </template>
          </van-cell>
          <van-cell
            title="OA截图"
            v-if="detailData.oa_img"
          >
            <template #default>
              <a
                class="file-details f20 btn_text"
                :href="detailData.oa_img"
                download="orderFile/20200906/pkq.jpeg"
              >
                <van-icon name="photo" />
              </a>
            </template>
          </van-cell>
        </van-collapse-item>
      </van-collapse>
    </div>
    <div class="order_jiebtn order_btn" v-if="detailData.status==1">
      <div @click="pickOrder">接单</div>
    </div>
    <!-- 已接单 -->
    <div class="order_qxbtn order_btn">
      <div @click="withdrawFile('qz')" v-if="lx == 2 && (xm==3 && bz == 1) && detailData.status == 2" class="withdraw-btn">撤回签字文件</div>
      <div @click="withdrawFile('oa')" v-if="((xm==3 && bz == 2) || (xm == 4 && bz == 2)) && detailData.status == 2" class="withdraw-btn">撤回oa截图</div>
      <div @click="withdrawFile('card')" v-if="detailData.status == 12" class="withdraw-btn">撤回报销凭证号</div>
      <!-- 上传 -->
      <div @click="upFile" v-if="bz== 0 && lx==2 && xm == 3 ">上传签字文件</div>
      <div @click="upFile" v-if="lx == 2 && ((xm==3 && bz == 1) || (xm == 4 && bz == 0))">上传OA截图</div>
      <div @click="upFile" v-if="lx == 2 && ((xm==3 && bz == 2) || (xm == 4 && bz == 2)) ">填写报销凭证号</div>
      <div @click="onSubmit" v-if="detailData.status == 12">确认上传</div>
      <div @click="truebc" v-if="lx == 7">确认用户补充订单资料</div>
    </div>
    <div class="order_backbtn order_btn" v-if="lx == 2 && bz == 0 ">
      <div @click="show.adminSign = true">退回订单</div>
    </div>
    <!-- 1  12
        2  1
    3  2-->
    <!-- 
            1   待接单
            2   已接单
            3   用户待确认
            4   已完成
            5   用户待缴费
    -->
    <!-- 用户申请退单 -->
    <van-dialog v-model="show.userSign" title="用户退单审核" v-if="(detailData.status == 13) && (detailData.ordersRefunds_status == 1)" :before-close="applySign">
      <div class="column" style="padding:10px 16px">
        <span style="font-size:11px;text-align:center"><font style="font-weight:bold">用户退单原因：</font> {{detailData.ordersRefunds_applyRemark}}</span>
          <van-radio-group v-model="show.isSign" direction="horizontal" style="padding:10px 0" @change="radioChange">
            <van-radio :name=1 icon-size="18px">通过</van-radio>
            <van-radio :name=-1 icon-size="18px">不通过</van-radio>
          </van-radio-group>
          <van-field
            style="border:1px solid #f2f2f2"
            v-show="show.isSign == -1"
            v-model="show.msg"
            rows="2"
            autosize
            type="textarea"
            maxlength="50"
            placeholder="请输入原因"
            show-word-limit
          />
      </div>
    </van-dialog>
    <!-- adminSign -->
    <van-dialog v-model="show.adminSign" title="退单申请" show-cancel-button :before-close="onBeforeClose">
       <div class="column" style="padding:10px 16px">
       <van-field
        v-model="show.message"
        rows="2"
        autosize
        type="textarea"
        maxlength="50"
        placeholder="请输入退单原因"
        show-word-limit
      />
       </div>
    </van-dialog>
  </div>
</template>
<script>
import navBar from "@cb/navBar.vue";
import { repOrders, getOrderInfo, trueOrderMsg } from "@/api/order.js";
import { Toast, Dialog } from "vant";
import {get} from '../../../../public/API/query'
export default {
  components: {
    navBar,
  },
  data() {
    return {
      detailData: {
        order_number: "",
        statuss: [],
        id: "",
      },
      isOfficialCard: null,
      stausName:'',
      //步骤
      bz: 0,
      //订单状态
      lx: 0,
      //代办事项
      xm: 0,
      activeClass: ["1", "2"],
      baseUrls: process.env.VUE_APP_BASE_URL,
      jdDate: "",
      B_URL:process.env.VUE_APP_B_URL,
      show:{
        userSign:true,
        adminSign:false,
        isSign:null,
        message:'',
        msg:''
      }
    };
  },
  computed: {
    time() {
      return (
        (this.detailData.service_time || this.detailData.rush_time || 0) + "天"
      );
    },
    syTime() {
      return (
        Math.floor((((this.detailData.service_time*1000 * 3600 * 24) + (new Date(this.detailData.created_at).getTime()))-(new Date().getTime()))/(1000*3600*24))<0?'NA':
        Math.floor((((this.detailData.service_time*1000 * 3600 * 24) + (new Date(this.detailData.created_at).getTime()))-(new Date().getTime()))/(1000*3600*24))+'天'
      );
    },
    orderPayStatus() {
      if (this.detailData.pay_info) {
        return this.detailData.pay_info.status == 1 ? false : true;
      } else {
        return false;
      }
    },
    smrz() {
      return sessionStorage.getItem('isSmrzOver')
    },
    ordermsg(){
      return this.detailData.fieldJson?JSON.parse(this.detailData.fieldJson):[]
    },
    title(){
      return this.detailData.expense_cate?this.detailData.expense_cate.title:''
    },
  },
  watch: {
    $route: "get",
  },
  deactivated() {
    this.$destroy(true); //销毁组件
  },
  methods: {
    onClickLeft() {
      this.$router.push("/replace/home");
    },
    // 撤回文件
    withdrawFile(wh){
      var url;
      var msg;
        switch(wh){
          case 'qz':
            url = 'withdrawSignFile';  
            msg = '签字文件'
          break;
          case 'oa':
            url = 'withdrawOaFile';
            msg = 'oa截图'
          break;
          case 'card':
            url = 'withdrawRmbVoucher',
            msg = '报销凭证号'
          break;
        }  
      Dialog.confirm({
        title: '撤回文件',
        message: '是否撤回'+msg,
        }).then(() => {
        let params = {
          id:this.detailData.id
        }
        get(url,params,(res) => {
          if(res.code == 200){
          Toast.success('撤回成功');
          this.get(false);  
          switch(wh){
            case 'qz':
              this.bz = 0;
            break;
            case 'oa':
              this.bz = 1;
            break;
            case 'card':
              this.bz = 2;
            break;  
          }
          this.$forceUpdate();
          }else{
            let num = res.data.indexOf(':');
            Toast.fail(res.data.slice(num+1)); 
          }  
        })
        })
        .catch(() => {
          Toast.fail('您已取消撤回')
        });
    },
    // 确认订单
    onSubmit(){
      let params = {
        id:this.detailData.id
      }
      get('confirmCompletion',params,(res) => {
        if(res.code == 200){
          Toast.success('订单已完成 等待用户确认');
          this.$router.push('/replace/home') 
        }else{
          Toast.fail(res.data) 
        }
      })
    },
    //ZJJ方法
    get(flag = true) {
      let params = {
        id: this.$route.query.id,
      };
      get("ordersDetail",{...params},res=>{
        if (res.code == 200) {
          this.detailData = res.data;
          this.stausName = this.getStaus(res.data.status)
          this.lx = this.detailData.status;
          this.xm = this.detailData.service_project
          if(flag){
            var id = this.detailData.statuss[this.detailData.statuss.length - 1].status_id;
            console.log('id',id);
            this.detailData.statuss.length > 0 && id == 3 ? (this.bz = 0) : "";
            if(this.xm == 3){
              this.detailData.statuss.length > 0 &&  id == 7 ? (this.detailData.sign_file != null ?this.detailData.sign_file.length != 0:this.detailData.sign_file != null) ? (this.bz = 1) :this.bz = 0:'';
            }
            this.detailData.statuss.length > 0 && (id == 6)?(this.detailData.oa_img != null ?this.detailData.oa_img.length != 0:this.detailData.oa_img != null) ? (this.bz = 2) :this.bz = 1:'';
            this.detailData.statuss.length > 0 &&  id == 8 && this.xm == 3 && (this.detailData.oa_img != null ?this.detailData.oa_img.length != 0:this.detailData.oa_img != null)?this.bz = 2:'';
            this.detailData.statuss.length > 0 &&  id == 8 && this.xm == 3 && (this.detailData.sign_file != null ?this.detailData.sign_file.length != 0:this.detailData.sign_file != null)?this.bz = 1:'';
            this.detailData.statuss.length > 0 &&  id == 8 && this.xm == 3 && (this.detailData.oa_img != null ?this.detailData.oa_img.length != 0:this.detailData.oa_img != null) && (this.detailData.sign_file != null ?this.detailData.sign_file.length != 0:this.detailData.sign_file != null)?this.bz = 2:'';
            this.detailData.statuss.length > 0 &&  id == 8 && this.xm == 4 && (this.detailData.oa_img != null ?this.detailData.oa_img.length != 0:this.detailData.oa_img != null)?this.bz = 2:'';
            console.log('bz',this.bz);
            res.data.ordersExpenseCateJson.map(item=>{
              if(item.fieldEn == 'isOfficialCard'){
                this.isOfficialCard = item.value
              }
            })
          }
          this.xm == 4 &&(this.detailData.oa_img != null ?this.detailData.oa_img.length == 0:this.detailData.oa_img == null) ?this.bz = 0:this.bz = this.bz;
        }else{
          Toast.fail(res.data.split(':')[1])
        }
        if (this.detailData.status != 1) {
          var jdIndex = this.detailData.statuss.findIndex((item) => {
            return item.status_id == 3;
          });
          this.detailData.statuss[jdIndex]?this.jdDate = this.detailData.statuss[jdIndex]['created_at']:''
        }
        var payIndex = this.detailData.statuss.findIndex((item) => {
          return item.status_id == 2;
        });
      })
    },
    upFile() {
      var wh;
      if (this.xm == 3 && this.bz == 0) {
        wh = "qz";
      }
      if (this.xm == 3 && this.bz == 1) {
        wh = "oa";
      }
      if (this.xm == 3 && this.bz == 2) {
        wh = "bx";
      }
      if (this.xm == 4 && this.bz == 0) {
        wh = "oa";
      }
      if (this.xm == 4 && this.bz == 2) {
        wh = "bx";
      }
      switch (wh) {
        case "qz":
        case "oa":
          this.$router.push({
            path: `/replace/supplement`,
            query: {
              id: this.detailData.id,
              wh: wh,
            },
          });
          break;
        case "bx":
          this.$router.push({
            path: "/replace/filin",
            query: {
              id: this.detailData.id,
            },
          });
          break;
        default:
          break;
      }
    },
    truebc() {
      let params = {
        order_id: this.detailData.id,
      };
      trueOrderMsg(params).then((res) => {
        if (res.code == 200) {
          Dialog.alert({
            title: "操作成功",
            message: `服务天数:${this.detailData.service_time}天;   超时一天:该订单将无收益;   超时两天:扣费50元;    超时三天:该订单将重新指派代报员;`,
          }).then(() => {
            this.$router.go(0);
          });
        }
      });
    },
    // 退订单弹出层回调函数
    onBeforeClose(action,done){
      if(action == 'confirm'){
        if(this.show.message == ''){
          Toast.fail('退单理由不能为空')  
          done(false)
        }else{
          let params = {
            id:this.detailData.id,
            remark:this.show.message   
          }
          get('applyChargeback',params,(res) => {
            if(res.code == 200){
              done()
              Toast.success('退单成功')
              this.$router.push({
                path:'/replace/home'  
              })  
            }else{
              done()
              Toast.fail(res.data)
            } 
          })  
        }
      }
      else{
          done()
      }
  },
  applySign(action,done){
    if(action == 'confirm'){
    if(this.show.isSign == null){
      Toast.fail('必须选择通过或不通过')  
      done(false)
    }else{
      let params = {
        id:this.detailData.id,
        type:this.show.isSign,
      }
      this.show.msg == ''?'':params.remark = this.show.msg
      get('chargebackExamine',params,(res) => {
        if(res.code == 200){
          Toast.success('审核成功');
        }else{
          Toast.fail(res.data);
        }
        done()
        this.$router.push({
          path:'/replace/home'  
        })
      })  
    }
    }
  },
  getStaus(value){
     switch (value) {
    case 1:
      return "待接单";
    case 2:
      return "处理中";
    case 3:
      return "用户待确认";
    case 4:
      return "已完成";
    case 5:
      return "待付款";
    case 6:
      return "代报员退回";
    case 7:
      return "补充资料待确认";
    case 8:
      return "失效";
    case 9:
      return "已取消";
    case 10:
      return "检查报销资料中";
    case 11:
      return "报销资料需补充信息";
    case 12:
      return "待代报员确认自已工作结果是否正确";
    case 13:
      return "退款订单";
  }  
  },
    //接单
    pickOrder() {
      if (this.smrz) {
        let params = {
          // repOrders
          id: this.detailData.id,
        };
        get("acceptOrders",params,res=>{
          if (res.code == 200) {
            Dialog.alert({
              title: "接单成功",
              message: `服务天数:${this.detailData.service_time}天;  超时一天:该订单将无收益;   超时两天:扣费50元;    超时三天:该订单将重新指派代报员;`,
            }).then(() => {
              this.$router.push("/replace/home");
            });
          } else {
            Toast.fail("接单失败");
          }
        })
        // });
      } else {
        Dialog.alert({
          title: "提示111",
          message: `请先进行实名认证`,
        }).then(() => {
          this.$router.push("/authentication");
        });
      }
    },
    radioChange(val){
      this.show.msg = '';  
    }
  },
  created() {
    this.get();
  },
  filters: {
    name(value) {
      var a = value.split("/");
      a.splice(0, 2);
      return a.join("");
    },
    syts(value) {
      return value;
    },
    type(value) {
      switch (value) {
        case 1:
          return "专利";
      }
      
    },
    isGwk(value) {
      switch (value) {
        case "1":
          return "是";
          break
        default:
          return "否"
      }
    },
    paytype(value){
      switch (value) {
        case '1':
          return '公务卡'
          break;
        case '2':
          return '工资卡'
          break;
        default:
      }
    },
    isother(value){
      switch (value) {
        case '1':
          return '他人'
          break;
        case '-1':
          return '自己'
          break;
        default:
          break;
      }
    },
    isSelf(value){
      if(value == 1){
        return '代报员原因'
      }else{
        return '用户原因'
      }
    }
  },
};
</script>
<style lang="less" scoped>
/deep/ [class*=van-hairline]::after{
  border:none !important
}
a:link,
a:visited {
  text-decoration: underline;
  color: #0016ff;
}
/deep/ .van-radio__label{
  font-size:14px;
}
/deep/ .van-radio--horizontal{
  padding:10px 0;
}
.service_file {
  padding: 7px 16px;
}
.nav-bar {
  width: 100%;
  background-color: #fff;
  position: relative;
  z-index: 2000;
  margin-bottom: 10px;
  .bottom {
    padding: 0 0.4rem;
    box-sizing: border-box;

    line-height: 1.333333rem;
    font-size: 20px;
    z-index: 1;
    text-align: center;
    > span {
      &:nth-child(1) {
        height: 1.333333rem;
        float: left;
        text-align: center;
        font-weight: 700;
        i {
          line-height: 1.333333rem;
        }
      }
      &:nth-child(2) {
        text-align: center;
        font-weight: 700;
      }
    }
  }
}
.order_jiebtn {
  div {
    width: 325px;
    height: 45px;
    line-height: 45px;
    margin-top: 15px;
    background: #0016ff;
    border-radius: 22.5px;
  }
}
.order_btn {
  height: auto;
  background: #fff;
  line-height: 45px;
  font-size: 20px;
  position: relative;
  z-index: 1999;
  font-family: PingFang-SC-Medium, PingFang-SC;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  position: fixed;
  bottom: 0;
  left: calc(~"50% - 162.5px");
  padding-bottom: 10px;
}
.order_qxbtn {
  div {
    width: 325px;
    height: 45px;
    line-height: 45px;
    margin-top: 15px;
    background: #0016ff;
    border-radius: 22.5px;
  }
}
.order_backbtn {
  margin-bottom: 60px;
  div {
    width: 325px;
    height: 45px;
    line-height: 45px;
    margin-top: 15px;
    background: #0016ff;
    border-radius: 22.5px;
  }
}

.orderInfo {
  padding-bottom: 80px;
  &-content {
    .steps-box {
      /deep/.van-steps {
        .van-hairline.van-step.van-step--vertical.van-step--finish {
          .van-step__line {
            background-color: #1996ff;
          }
        }

        .van-hairline.van-step.van-step--vertical:last-child {
          .van-step__line {
            display: none;
          }
        }

        .van-step__circle-container {
          z-index: 1;
          background-color: #fff;
        }

        // 激活的图标
        .activeIcon {
          padding: 0.053333rem;
          box-sizing: border-box;
          width: 0.293333rem;
          height: 0.293333rem;
          border-radius: 50%;
          border: 0.026667rem solid #068eff;

          > div {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #068eff;
          }
        }

        // 未激活的图标
        .inactiveIcon {
          position: relative;
          width: 0.293333rem;
          height: 0.293333rem;
          border-radius: 50%;
          border: 0.026667rem solid #068eff;
        }

        .step-title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 0.373333rem;
          font-weight: 700;
          color: #353535;

          .button {
            padding: 0 0.266667rem;
            font-size: 0.32rem;
            background-color: #c8c8c8;
            border-radius: 0.2rem;
            font-size: 0.32rem;
            height: 0.426667rem;
            line-height: 0.4rem;
            font-weight: 500;
          }
        }

        .step-info {
          color: #353535;
          font-size: 0.32rem;

          > div:nth-child(1) {
            display: flex;
            justify-content: space-between;
            line-height: 0.8rem;
          }
        }
      }
    }
  }
}
.files {
  display: inline-block;
  margin-right: 15px;
}
.ml10{
  margin-left: 7px;
}
.withdraw-two{
  padding-bottom:40px;
}
.withdraw-three{
  padding-bottom:100px;
}
.withdraw-four{
  padding-bottom:180px;
}
.withdraw-btn{
  background:#fff !important;
  color:#0016ff !important;
  border:1px solid #0016ff;
}
/deep/ .van-radio-group--horizontal{
  justify-content: center;
}
</style>